<template>
  <div>
    <div class="ui middle aligned center aligned grid">
      <div class="twelve wide column">
        <div class="ui stacked segment">
            <sui-grid>
    <sui-grid-row>
      <sui-grid-column :width="14">
                  <p>欢迎回来{{ user.auth.username }}</p>
      </sui-grid-column>
      <sui-grid-column :width="2">
        <sui-button v-on:click="logout" size="mini" color="red" content="Logout" basic />
      </sui-grid-column>
    </sui-grid-row>
  </sui-grid>

        </div>
      </div>
    </div>
    <div class="ui middle aligned center aligned grid">
      <div class="twelve wide column">
        <div class="ui centered menu">
        <nuxt-link class="item" to="/" > User</nuxt-link>
           <nuxt-link class="item" to="/test">test</nuxt-link>
          <a class="item" data-tab="category">类别管理</a>
          <!--<a class="item" data-tab="contentctl">内容管理</a>
          <a class="item" data-tab="mainpageCtl">主页管理</a>
          <a class="item" data-tab="productctl">产品管理</a>
          <a class="item" data-tab="memberctl">团队管理</a>
          <a class="item" data-tab="newsctl">新闻管理</a>
          <a class="item" data-tab="pagebanner">页面banner</a>
          <a class="item" data-tab="systemctl">后台提交数据</a>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const Cookie = process.client ? require("js-cookie") : undefined;
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    logout(){
     this.$store.commit("unsetUser");
     Cookie.remove('user');
     this.$router.push('/login')
    }
  },
};
</script>

<style>
.nuxt-link-active{
    background: rgba(0, 0, 0, 0.05) !important;
    color: rgba(0, 0, 0, 0.95) !important;
    font-weight: normal !important;
    box-shadow: none !important;
}
</style>